<template lang="html">
  <div class="giftBox">
    <div class="topBox">
      <el-row>
        <el-col :span="2">
          客户姓名:
        </el-col>
        <el-col :span="3" class="text-left">
          <el-input v-model="customerName" size="small" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2">
          客户手机:
        </el-col>
        <el-col :span="3" class="text-left">
          <el-input v-model="customerPhone" size="small" placeholder="请输入内容"></el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;">
        <el-col :span="2" :offset="2" class="text-left">
          <el-button type="success" size="small" @click="find">筛选</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="btmBox">
      <ul class="listBox">
        <li>
          <span class="productName">客户</span>
          <span class="productNum">份数</span>
          <span class="createTime">赠送礼物</span>
          <span class="option">赠送时间</span>
        </li>
        <li v-for="item in $store.state.activity.gift.historyList">
          <span class="productName">{{item.customerName?item.customerName:'-'}}<br>
            {{item.customerPhone}}</span>
          <span class="productNum">{{item.num?item.num:'0'}}</span>
          <span class="createTime">{{item.prizeName}}</span>
          <span class="option">{{item.createTime | getDate}}<br>
            {{item.createTime | getTime}}</span>
        </li>
      </ul>
    </div>
    <el-row>
      <el-col :span="21" :offset="3" class="text-right">
        共{{this.$store.state.activity.gift.total}}条
        <span style="display:inline-block; min-width:100px;">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :page-count="$store.state.activity.gift.pages">
          </el-pagination>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data(){
    return {
      page:1,
      customerName:'',
      customerPhone:''
    }
  },
  filters:{
    getDate:function (val){
      var date=new Date();
      date.setTime(val);
      var year = date.getFullYear();
      var month= date.getMonth()+1;
      if(month<10){
        month='0'+month;
      }
      var day=date.getDate();
      if(day<10){
        day='0'+day;
      }
      return year+"-"+month+"-"+day;
    },
    getTime:function (val){
      var date=new Date();
      date.setTime(val);
      var hours=date.getHours();
      if(hours<10){
        hours='0'+hours;
      }
      var minutes=date.getMinutes();
      if(minutes<10){
        minutes='0'+minutes;
      }
      return hours+":"+minutes
    }
  },
  methods:{
    handleCurrentChange:function (){
      console.log(this.page);
      this.getList();
    },
    find:function (){
      this.getList();
    },
    getList:function (){
      var that = this;
      var json={
        customerName:that.customerName,
        customerPhone:that.customerPhone,
        pageCount:10,
        pageIndex:that.page
      }
      that.$store.dispatch('getActivityGiftHistoryList',json)
    }
  },
  created(){
    this.$store.dispatch('activityCloseType',{parentName:'gift',typeName:'showType1'});
    this.$store.dispatch('activityCloseType',{parentName:'gift',typeName:'showType2'});
    this.$store.dispatch('activityChangeTitle',{parentName:'gift',titleName:'parentTitle',title:'/拼团送礼'});
    this.getList();
  }
}
</script>

<style lang="Sass" scoped>
  .giftBox{ line-height: 30px;
    .header{ width: 98%; list-style: none; margin: 10px auto 0 auto; overflow: hidden;
      li{float: left; margin-right: 10px; padding: 3px 6px 0 6px; background: #E7E9F0;
        border-radius: 8px 8px 0 0; color: #666666;}
      .topActive{background: #fff;}
    }
    .topBox{width: 98%; margin: 0px auto 10px auto; padding: 10px 5px; background: #fff; border-radius: 8px;
       box-sizing: border-box;
     }
    .btmBox{width: 98%; margin: 10px auto; padding: 10px 5px; background: #fff; border-radius: 8px;
       box-sizing: border-box;
       .listBox{list-style: none;
         li{display: flex; width: 100%; padding: 5px; box-sizing: border-box;
           span{text-align: left; line-height: 20px; font-size: 12px;}
           .productName{flex: 0 0 200px;}
           .productNum{flex: 0 0 200px;}
           .createTime{flex: 1;}
           .option{flex: 0 0 120px; cursor: pointer;}
         }
         li:nth-of-type(odd){ background: #FAFAFC; }
         li:first-child{ background: #fff;}
       }
     }
  }
</style>
